<template>
  <div class="employee-entry-list-container">
    <router-link to="/main/biao/rzziliao" class="back-btn">返回</router-link>
    <h2 class="page-title">员工入职资料表列表</h2>
    <div class="search-bar">
      <input v-model="searchForm.name" placeholder="姓名" class="search-input" />
      <input v-model="searchForm.applicationPosition" placeholder="申请职位" class="search-input" />
      <button class="search-btn" @click="search">搜索</button>
      <router-link to="/main/biao/rzziliao" class="add-btn">新增入职资料</router-link>
    </div>
    <div class="table-wrapper">
      <table class="data-table">
        <thead>
          <tr>
            <th class="table-header">姓名</th>
            <th class="table-header">申请职位</th>
            <th class="table-header">联系电话</th>
            <th class="table-header">申请日期</th>
            <th class="table-header">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id" class="table-row">
            <td class="table-cell">{{ item.name }}</td>
            <td class="table-cell">{{ item.applicationPosition }}</td>
            <td class="table-cell">{{ item.contactPhone }}</td>
            <td class="table-cell">{{ item.applicationYear }}年{{ item.applicationMonth }}月{{ item.applicationDay }}日
            </td>
            <td class="table-cell operation-cell">
              <button class="operation-btn view-btn" @click="viewDetail(item.id)">详情</button>
              <button class="operation-btn edit-btn" @click="editDetail(item.id)">编辑</button>
              <button class="operation-btn delete-btn" @click="deleteRecord(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="pagination">
      <button :disabled="current === 1" @click="changePage(current - 1)" class="page-btn prev-btn">上一页</button>
      <span class="page-num">第 {{ current }} 页</span>
      <button :disabled="current === total" @click="changePage(current + 1)" class="page-btn next-btn">下一页</button>
    </div>
  </div>
</template>

<script>
import entryDocumentApi from '@/api/entryDocument';

export default {
  data() {
    return {
      searchForm: {
        name: '',
        applicationPosition: ''
      },
      tableData: [],
      current: 1,
      size: 10,
      total: 0
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await entryDocumentApi.getList({
          current: this.current,
          size: this.size,
          name: this.searchForm.name,
          applicationPosition: this.searchForm.applicationPosition
        });

        if (response.data) {
          this.tableData = response.data.records;
          this.total = Math.ceil(response.data.total / this.size);
        }
      } catch (error) {
        console.error('获取列表失败', error);
        alert('获取列表失败: ' + (error.response?.data?.message || error.message));
      }
    },
    search() {
      this.current = 1;
      this.fetchData();
    },
    changePage(page) {
      this.current = page;
      this.fetchData();
    },
    async viewDetail(id) {
      this.$router.push({
        path: '/main/biao/rzziliao',
        query: { id: id, mode: 'view' }
      });
    },
    async editDetail(id) {
      this.$router.push({
        path: '/main/biao/rzziliao',
        query: { id: id, mode: 'edit' }
      });
    },
    async deleteRecord(id) {
      if (!confirm('确定要删除这条记录吗？')) {
        return;
      }

      try {
        const response = await entryDocumentApi.delete(id);
        if (response.data) {
          alert('删除成功');
          this.fetchData();
        }
      } catch (error) {
        console.error('删除失败', error);
        alert('删除失败: ' + (error.response?.data?.message || error.message));
      }
    }
  }
};
</script>

<style scoped>
.employee-entry-list-container {
  font-family: '宋体';
  padding: 0px 10px;
  background-color: #f9f9f9;
}

.page-title {
  font-size: 24px;
  /* margin-bottom: 10px; */
  color: #333;
  text-align: center;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-input {
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  width: 200px;
}

.search-btn,
.add-btn {
  padding: 8px 15px;
  border-radius: 5px;
  border: none;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  font-size: 1em;
  font-family: '宋体';
}

.back-btn {
  position: fixed;
  top: 10px;
  left: 0px;
  padding: 8px 12px;
  border-radius: 5px;
  border: none;
  color: white;
  transition: background-color 0.3s ease;
  text-decoration: none;
  
}

.search-btn {
  background-color: #1890ff;
}

.search-btn:hover {
  background-color: #40a9ff;
}

.add-btn {
  background-color: #52c41a;
  margin-left: 10px;
}

.add-btn:hover {
  background-color: #73d13d;
}

.back-btn {
  background-color: #1890ff;
  margin-left: 10px;
}

.back-btn:hover {
  background-color: #40a9ff;
}

.table-wrapper {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header {
  background-color: #e9e9e9;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid #ccc;
}

.table-row {
  transition: background-color 0.3s ease;
}

.table-row:hover {
  background-color: #f0f0f0;
}

.table-cell {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.operation-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.operation-btn {
  padding: 6px 10px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  margin: 0 5px;
  transition: background-color 0.3s ease;
  font-size: 1em;
  font-family: '宋体';
}

.view-btn {
  background-color: #1890ff;
  color: white;
}

.view-btn:hover {
  background-color: #40a9ff;
}

.edit-btn {
  background-color: #2fc25b;
  color: white;
}

.edit-btn:hover {
  background-color: #53d682;
}

.delete-btn {
  background-color: #f5222d;
  color: white;
}

.delete-btn:hover {
  background-color: #ff5a60;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.page-btn {
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.prev-btn {
  background-color: #f0f0f0;
}

.prev-btn:hover {
  background-color: #e0e0e0;
}

.next-btn {
  background-color: #f0f0f0;
}

.next-btn:hover {
  background-color: #e0e0e0;
}

.page-num {
  font-size: 16px;
  color: #333;
}
</style>